React 绑定事件的四种方式

您所在的位置：网站首页 › react 封装组建 › React 绑定事件的四种方式

React 绑定事件的四种方式

2024-01-04 01:03| 来源: 网络整理| 查看: 265

1. 简介

React 元素的事件处理和 DOM 元素类似。但是有一点语法上的不同:

React 事件绑定属性的命名采用驼峰式写法，而不是小写，例如原生的事件全是小写 onclick，React 里的事件是驼峰 onClick。如果采用 JSX 的语法需要传入一个函数作为事件处理函数，而不是一个字符串(DOM 元素的写法)。React的事件并不是原生事件，而是合成事件。在 React 中另一个不同是你不能使用返回 false 的方式阻止默认行为，你必须明确的使用 e.preventDefault()。

HTML 通常写法是：

提交 function clickHandle(e){ e.preventDefault(); //阻止默认事件 //或者使用如下的写法 return false; }

React 中写法为：

提交 function clickHandle(e){ e.preventDefault(); //阻止默认事件，不能使用return false } 2. React 绑定事件的几种方式当使用 ES6 class 语法来定义一个组件的时候，事件处理器会成为类的一个方法。必须谨慎对待 JSX 回调函数中的 this，类的方法默认是不会绑定 this 的。如果你忘记绑定 this.handleClick 并把它传入 onClick, 当你调用这个函数的时候 this 的值会是 undefined。通常情况下，如果你没有在方法后面添加 () ，例如 onClick={this.handleClick}，你应该为这个方法绑定 this。 2.1 方式一

在回调函数中使用箭头函数，直接在 render() 里写行内的箭头函数(不推荐)，这种写法存在的问题就是，当每次执行render() 的时候都会创建一个不同的回调函数。在大多数情况下，这没有问题。然而如果这个回调函数作为一个属性值传入低阶组件，这些组件可能会进行额外的重新渲染。

import React, { Component } from 'react'; import ReactDOM from 'react-dom'; class Box extends Component { handleClick(e,val){ console.log(e,val); } render() { return ( Component } from 'react'; import ReactDOM from 'react-dom'; class Box extends Component { handleClick(val,e) { //事件对象e要放在最后 console.log(val,e); } render() { return ( Component } from 'react'; import ReactDOM from 'react-dom'; class Box extends Component { handleClick =(e)=>{ console.log(e); } render() { return ( Component } from 'react'; import ReactDOM from 'react-dom'; class Box extends Component { constructor(){ super(); this.myhandleClick = this.handleClick.bind(this); } handleClick(e){ console.log(e); } render() { return ( handleClick(){ //执行DOM元素的 change属性 this.props.change(); } render() { return ( this.props.children} ); } }

父组件中代码：

class Counter extends Component { constructor() { super(); this.state = { count: 0 } } handleChange(type) { this.setState((preState, props) => { count: preState.count + 1 } }, () => { }) } render() { return ( Component } from 'react'; import ReactDOM from 'react-dom'; class Form extends Component { constructor() { super(); this.state = {name: ""} } handleChange(event) { this.setState({ name: event.target.value.toUpperCase() // 将输入的字母转成大写 }) } render() { return ( 名称：this.handleChange.bind(this)} /> ); } } ReactDOM.render( , document.getElementById('root') );

由于在表单元素上设置了 value 属性，因此显示的值将始终为 this.state.value，这使得 React 的 state 成为唯一数据源。使用 onChange 事件来监听 input 的变化，并修改 state。由于 handlechange 在每次按键时都会执行并更新 React 的 state，将字母转成大写，因此显示的值将随着用户输入而更新。

4.2 多个 input 元素当有多个 input 元素需要处理时，你可以通过给每个元素添加一个 name 属性，来让处理函数根据 event.target.name的值来选择做什么。在 React 中，使用 value 属性代替。这样，可以使得使用的表单和使用单行 input 的表单非常类似。在 React 中，Select 下拉菜单，不使用 selected 属性，而在根 select 标签上用 value 属性来表示选中项，当 Select 为多选时，对应的 state 应该为一个数组。注意：的 value 只读，所以它是 React 中的一个非受控组件。 import React, { Component } from 'react'; import ReactDOM from 'react-dom'; class Form extends Component { constructor() { super(); this.state = { name: "", desc: "", city: [1,2] } } handleChange(event) { if(event.target.name==='city'){ this.state.city.push(event.target.value); this.setState({}) return; } this.setState({ [event.target.name]: event.target.value }) } render() { return ( 名称：this.handleChange.bind(this)} /> 描述：this.handleChange.bind(this)}> 城市：this.handleChange.bind(this)}> 北京上海天津 ); } } ReactDOM.render( , document.getElementById('root') );

总的来说，这使得 , 和之类的标签都非常相似—它们都接受一个 value 属性，你可以使用它来实现受控组件。

4.3 受控组件应用场景

受控组件的应用场景：可以监听用户输入，改变用户输入的数据。例如上面将输入的字母转成大写、判断用户是否输入为空等。

如果你想寻找包含验证、追踪访问字段以及处理表单提交的完整解决方案，使用 Formik 是不错的选择。然而，它也是建立在受控组件和管理 state 的基础之上

有时使用受控组件会很麻烦，因为你需要为数据变化的每种方式都编写事件处理函数，并通过一个 React 组件传递所有的输入 state。在这些情况下，你可能希望使用非受控组件, 这是实现输入表单的另一种方式。

4.4 非受控组件

非受控组件，组件展示的值，完全不受 state 的控制。使用 ref 属性，用来绑定到 render() 输出的任何组件上。通过 ref 属性获取绑定的 DOM 元素，跟 vue 中 ref 的使用类似。

ref 使用方法：

当 ref 属性值为静态内容时： 1、绑定一个 ref 属性到 render 的返回值上； 2、通过 this.refs 获取绑定的 DOM 元素；

当 ref 属性值为 state 时： 1、使用 import 导入 react.createRef ； 2、将 state 作为 ref 的属性值，绑定到 render 的返回值上； 3、通过 state.current 获取绑定的 DOM 元素；

import React, { Component,createRef } from 'react'; import ReactDOM from 'react-dom'; class Form extends Component { constructor() { super(); this.title = createRef() } handleSubmit = () => { console.log(this.title.current.value) console.log(this.refs.myInput.value) } render() { return ( this.handleSubmit}>提交 ); } } ReactDOM.render( , document.getElementById('root') );

【本文地址】

React 绑定事件的四种方式

React 绑定事件的四种方式

今日新闻

推荐新闻